/* Copyright 2011 Elektrobit Wireless Communications Oy (EB)


  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 2 as 
  published by the Free Software Foundation.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along
  with this program; if not, write to the Free Software Foundation, Inc.,
  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.


 *All rights reserved 
 *Version:Elektrobit_Qt_1.0.0_20110305 */


/*///////////////////////////////////////////////
This can be "MovieWall" version 1.3, files used:
    - MovieWall7.qml
    - MovieModel2.qml
    - Images form: folder "Pics"

Feb 14, to integrate with "4 buttons".
*////////////////////////////////////////////////

import Qt 4.7
import "../script/script.js" as Script


Item {
    property string backGroudImage: ""
    property variant model: null
    //property url delegateImageSource: ""

    property bool backGroundAnimation: true
    property real flickY: 25
    signal currentItemClicked(int index)

    id: mainFrame
    width: 640
    height: 360



    Image {
        id: backGround
        anchors.fill: parent
        source: backGroudImage
    }



    Rectangle {
        id:lightChange
        anchors.fill: parent
        opacity: 0.0

        gradient: Gradient {
            GradientStop {position: 0.0; color: "black"}
            GradientStop {position: 0.2; color: "darkblue"}
            GradientStop {position: 1.0; color: "black"}

        }

        Behavior on opacity {
            SequentialAnimation {
                NumberAnimation {from: 0; to: 0.9; duration: 1500; easing.type: "OutCubic" }
                NumberAnimation {to: 0; duration: 2000; easing.type: "InQuad" }
            }
        }
    }

    function getRotationAngle (hVelocity) {
        var rotationAngle
        var a, b, c
        a = 200; b = 550; c = 1000

        if (hVelocity <= -c) {rotationAngle = -60}
        else if (hVelocity > -c && hVelocity <= -b) {rotationAngle = -45}
        else if (hVelocity > -b && hVelocity <= -a) {rotationAngle = -20}
        else if (hVelocity > -a && hVelocity <= a) {rotationAngle = 0}
        else if (hVelocity > a && hVelocity <= b) {rotationAngle = 20}
        else if (hVelocity > b && hVelocity <= c) {rotationAngle = 45}
        else if (hVelocity > c) {rotationAngle = 60}
        return rotationAngle
    }

    Item {
        id: rotationWall
        anchors.fill: parent

        transform: Rotation {
            id: rotation1
            origin.x: rotationWall.width/2
            axis {x: 0; y: 1; z:0}


            Behavior on angle {
                SequentialAnimation {
                    NumberAnimation {to: getRotationAngle (flickArea.horizontalVelocity); duration: 1500; easing.type: "OutCubic"}
                    NumberAnimation {to: 0; duration: 2000; easing.type: "InQuad"}
                }
            }
        }

        Component {
            id: movDelegate

            Column {
                spacing: 5

                Image {
                    id: movImage
                    //width: 130; height: 100
                    source: indexImage
                    smooth: true
                    state: "origin"

                    Rectangle {
                        id: movImageBackground
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        width: parent.width + 8
                        height: parent.height + 8
                        radius: 4
                        color: "yellow"
                        z: -1
                        opacity: 0.4
                        smooth: true

                    }

                    MouseArea {
                        id: click1
                        anchors.fill:parent
                        enabled: (rotation1.angle >= -15 && rotation1.angle <= 15) ? true:false
                        onClicked: {
                            mainFrame.currentItemClicked(index)
                        }
                    }

                    states: [ State {
                            name: "origin"
                            PropertyChanges { target: movImage; width: 110; height: 148 }
                        },
                        State {
                            name: "enlarged"
                            PropertyChanges { target: movImage; width: 190; height: 250 }
                        }
                    ]

                    transitions: [ Transition {
                            from: "origin"; to: "enlarged"
                            NumberAnimation { properties: "width, height"; duration: 600 }
                        },
                        Transition {
                            from: "enlarged"; to: "origin"
                            NumberAnimation { properties: "width, height"; duration: 500 }
                        }
                    ]


                }

                Text {
                    anchors.horizontalCenter: movImage.horizontalCenter
                    text: name
                    font.pixelSize: 15
                    width: 120
                    color: "yellow"
                    wrapMode: Text.Wrap
                    horizontalAlignment: Text.AlignHCenter
                }

            }

        }

        Flickable {
            id: flickArea
            width: parent.width * 3
            height: movRow.height
            anchors.horizontalCenter: parent.horizontalCenter
            y: flickY

            contentWidth: movRow.width + (flickArea.width - rotationWall.width)
            contentHeight: movRow.height

            boundsBehavior: Flickable.DragOverBounds
            maximumFlickVelocity: 1200

            onFlickStarted: {
                rotation1.angle = Math.random () * 10000;
                if(backGroundAnimation == true) {
                    lightChange.opacity = Math.random ();
                }
            }

            //Following components define Flickable contents.
            Rectangle {
                id: leftSpace
                width: (flickArea.width - rotationWall.width) / 2
                anchors.left: parent.left
                opacity: 0
            }

            Row {
                id: movRow
                spacing: 20
                anchors.left: leftSpace.right

                Repeater {
                    id: movRowRepeater
                    model: mainFrame.model
                    delegate: movDelegate
                }
            }

            Rectangle {
                id: rightSpace
                width: (flickArea.width - rotationWall.width) / 2
                anchors.right: parent.right
                opacity: 0
            }

        }

    }


 }



